<template>
  <view class="p-member">
    <image :src="info.pic || avatarImg" mode="scaleToFill" class="p-avatar"></image>

    <text>{{info.surname || ''}}家长<text v-if="info.relation">({{info.relation}})</text></text>
    <image :src="vipImg" mode="scaleToFill" class="p-vip"></image>
  </view>
</template>

<script setup>
import vipIcon1 from "@/static/common/vip-jd.svg";
import vipIcon2 from "@/static/common/vip-nd.svg";
import vipIcon3 from "@/static/common/vip-yj.svg";
import vipIcon4 from "@/static/common/vip-zz.svg";
import avatarImg from "@/static/common/avatar.svg";

const props = defineProps({
  info: {
    type: Object,
    default: () => ({}),
  },
});

const vipConfs = shallowReactive({
  季度会员: vipIcon1,
  年度会员: vipIcon2,
  永久会员: vipIcon3,
  至尊会员: vipIcon4,
});
const vipImg = computed(() => {
  const { title } = props.info?.member || {};
  return vipConfs[title];
});
</script>

<style lang=scss scoped>
.p-member {
  display: flex;
  align-items: center;
  border-radius: 10rpx;
  color: #ff5c55;
  background: #ffefef;
  padding: 10rpx 20rpx;
  margin-top: 20rpx;
  .p-avatar {
    width: 60rpx;
    height: 60rpx;
    border-radius: 60rpx;
    margin-right: 10rpx;
  }
  .p-vip {
    width: 150rpx;
    height: 48rpx;
    margin-left: 20rpx;
  }
}
</style>